<template>
    <div>
        <a-form :form="form" @submit.prevent="onSubmit" id="update-form">
            <div class="header">
                <h3>一、基本信息</h3>
                <div class="operate">
                    <transition name="slide-fade">
                        <a-button type="primary" @click="returned" v-show="!disabled">还原默认</a-button>
                    </transition>
                    <a-button type="primary" v-if="disabled" @click="edit">修改</a-button>
                    <a-button type="primary" @click="onSubmit" v-if="!disabled">保存修改</a-button>
                </div>
            </div>
            <a-row :gutter='10' class="form-main-content">
                <a-col :key="0" :span="8" class="form-item">
                    <a-form-item label="部门编号">
                        <div>{{data.number}}</div>
                    </a-form-item>
                </a-col>
                <a-col :key="1" :span="8" class="form-item">
                    <a-form-item label="部门名称">
                        <a-input  maxlength="32" placeholder="请输入部门名称" v-decorator="[
                            'name',
                            {
                                initialValue:data.name,
                            }
                        ]" v-if="!disabled"/>
                        <div v-if="disabled">{{data.name}}</div>
                    </a-form-item>
                </a-col>
                <a-col :key="2" :span="8" class="form-item">
                    <a-form-item label="上级部门">
                        <a-tree-select
                                v-decorator="[
                                    'pid',
                                    {
                                        initialValue: data.pid.toString(),
                                    }
                                ]"
                                placeholder='请选择'
                                treeDefaultExpandAll
                                :treeData="tree"
                                v-if="!disabled"></a-tree-select>
                        <div v-if="disabled">{{getCurrDepartment || '--'}}</div>
                    </a-form-item>
                </a-col>
                <a-col :key="3" :span="8" class="form-item">
                    <a-form-item label="部门状态">
                        <div v-if="disabled_status">{{parseInt(data.status) === 0 ? '停用' : '可用'}}</div>
                        <a-select v-decorator="['status', {initialValue: data.status}]" v-if="!disabled_status">
                            <a-select-option :value="1">
                                可用
                            </a-select-option>
                            <a-select-option :value="0">
                                停用
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :key="4" :span="8" class="form-item">
                    <a-form-item label="建立时间">
                        {{data.addtime}}
                    </a-form-item>
                </a-col>
                <a-col :key="5" :span="24" class="form-item">
                    <a-form-item label="备注">
                        <a-textarea
                            v-if="!disabled"
                            rows="6"
                            placeholder="备注"
                            v-decorator="['remark',
                                {
                                    initialValue: data.remark,
                                }]"
                        />
                        <span v-if="disabled">{{data.remark ? data.remark : '无'}}</span>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: 0,
                form: this.$form.createForm(this),
                disabled: true,
                disabled_status: true,
                data: {},
                tree: [],
                baseTree: []
            }
        },

        computed: {
            getCurrDepartment: function() {
                let department = {};
                function flatten (data) {
                    return data.reduce((arr, {id, name, children = []}) =>
                        arr.concat([{id, name}], flatten(children)), [])
                }
                let depsObj = flatten(this.tree);
                depsObj.map(item => {
                    department[item.id] = item.name
                });
                return department[this.data.pid]
            }
        },
        methods: {
            onSubmit(form) {
                this.form.validateFields(async (err, values) => {
                    if (!err) {
                        let childTree = this.baseTree.filter(f => f.pid == this.id)
                        if (values.pid == this.id || childTree.findIndex(f => f.id == values.pid) != -1) {
                            this.$message.error('不能选择当前部门或者下级部门');
                            return false
                        }
                        values.id = this.id
                        console.log(values)
                        let { status, message } = await this.postData(values)
                        if (status === 1) {
                            this.$message.success('保存成功', 1);
                            this.data = {...this.data, ...values};
                            this.disabled = true
                            this.disabled_status = true
                        } else {
                            this.$message.error(message, 2);
                            if(message.indexOf('此部门') != -1){
                                this.disabled_status = true
                            }
                        }
                    }
                })
            },
            edit() {
                this.disabled = false
                this.disabled_status = false
            },
            async returned() {
                let setData = {
                    name: this.data.name,
                    status: this.data.status,
                    pid: this.data.pid.toString(),
                    remark: this.data.remark
                };
                this.form.setFieldsValue(setData)
                // let { data: detail } = await this.getDetail(this.id)
                // this.data = detail
                this.disabled = true
                this.disabled_status = true
            },
            async postData(param) {
                return await this.http('put', 'department/update', param);
            },
            async getDetail(id) {
                return await this.http('get', `/department/view/${id}`);
            },
            createTree(data){
                let tree = []
                data.map(item => {
                    let {name, id} = item
                    item.label = name
                    item.value = id
                    item.children = data.filter(f => f.pid == item.id)
                    if(item.pid === 0 && item.children.length){
                        tree.push(item)
                    }
                })
                return tree
            },
        },
        async mounted() {
            this.id = this.$route.params.id
            let { data: detail } = await this.getDetail(this.id)
            this.data = detail
            let { data } = await this.http("get", "/department/tree")
            this.baseTree = (data || [])
            this.tree = this.createTree(data || [])
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";
    .header {
        @include fj();
        margin-bottom: 30px;
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
</style>
